<template>
	<div id="detail">
		<div class="head">
			<swiper :lisData="lisData">
				<div slot="head-left" class="headL" @click="tojump(shouye)"></div>
				<div slot="head-right" class="headR"></div>
				<div slot="footer-left" class="footerL">仅剩10件</div>
				<div slot="footer-right" class="footerR">1/6</div>
			</swiper>
		</div>
		<div class="activityBox">
			<span class="text1">上新专享</span>
			<span class="price">¥99.00</span>
			<span class="text2">距离结束还剩1天</span>
		</div>
		<div class="goods">
			<p class="price">¥120.00</p>
			<p class="introduce">有凤来仪古风保湿气垫霜 轻薄水润粉底奶油肌妆效</p>
			<p class="describe">彰显华夏之美，衬红妆风韵</p>
		</div>
		<div class="discountBox">
			<div class="discount">
				<span class="youhui">优惠</span>
				<span class="newMen">故宫新人</span>
				<span class="present">故宫小主新人领百元礼包</span>
				<span class="rightImg"></span>
			</div>
			<div class="quan">
				<span class="coupons">领券</span>
				<span class="coupons2">满200享9折</span>
				<span class="coupons3">满150减10</span>
			</div>
		</div>
		<div class="chooseBox">
			<div class="title">
				<span class="text1">已选</span>
				<span class="text2">已选，01自然色</span>
				<span class="rightImg"></span>
			</div>
			<div class="goodsList">
				<ul>
					<li v-for="item in goodsList" :key="item.id" :class="[{present:current==item.id},{'':current!=item.id}]" @click="choose(item)">
						<img :src="item.imgpath" />
					</li>
				</ul>
				<span class="color">共3种颜色</span>
			</div>
			<p class="hrImg"></p>
			<div class="title">
				<span class="text1">送至</span>
				<span class="text2">北京 至 广州海珠区</span>
				<span class="rightImg"></span>
			</div>
			<div class="notice">
				<span>现货</span>
				今天23：00前完成下单，预计6月2日12:00前发货，6月6日（周六）24:00前送达
			</div>
			<p class="hrImg"></p>
			<div class="title">
				<span class="text1">运费</span>
				<span class="text2">免运费</span>
				<span class="rightImg"></span>
			</div>
			<p class="hrImg" style="margin-top: 0.12rem;"></p>
			<div class="chooseFooter">
				<ul class="footerList">
					<li>
						<span class="bg-footer"></span>
						<span class="text">售后服务</span>
					</li>
					<li>
						<span class="bg-footer"></span>
						<span class="text">国妆特字</span>
					</li>
					<li>
						<span class="bg-footer"></span>
						<span class="text">七天退换</span>
					</li>
					<li>
						<span class="bg-footer"></span>
						<span class="text">闪电退款</span>
					</li>
				</ul>
			</div>

		</div>
		<div class="evaluateBox">
			<div class="head">
				<span class="line"></span>
				<span class="text">评价（12245）| 好评率 <span class="red">98%</span></span>
				<span class="rightImg"></span>
			</div>
			<div class="keyWords">
				<ul>
					<li>外观精美</li>
					<li>轻薄水润</li>
					<li>自然服帖</li>
				</ul>
			</div>
			<div class="menEvaluate">
				<ul class="evaluateList">
					<li v-for="item in evaluateList" :key="item.id">
						<div class="head-men">
							<img :src="item.headImg" class="headImg" />
							<span class="name">{{item.name}}</span>
							<ul class="star">
								<li></li>
								<li></li>
								<li></li>
								<li></li>
								<li></li>
							</ul>
						</div>
						<div class="evaluate">
							<span class="evaluateText">{{item.evaluateText}}</span>
							<img :src="item.evaluateImg" />
						</div>
					</li>
				</ul>

			</div>
		</div>
		<div class="footerBox">
			<div class="footer">
				<ul>
					<li>
						<p class="collection"></p>
						<p class="text">收藏</p>
					</li>
					<li>
						<p class="cart"></p>
						<p class="text">购物车</p>
					</li>
					<li>
						<p class="kefu"></p>
						<p class="text">客服</p>
					</li>
				</ul>
				<div class="btnBox">
					<input type="button" class="add" value="加入购物车" />
					<input type="button" class="buy" value="立即购买"  @click="cart"/>
				</div>
			</div>
		</div>
		<div class="bulletBox" v-if="show==true">
			<div class="top"></div>
			<div class="content">
				<img src="../../assets/img/mirror-swiper.png" class="shopImg"/>
				<span class="price">价格：¥120</span>
				<span class="choose">已选，01号自然色</span>
				<span class="close" @click="close"></span>
				<span class="colorNumber">色号</span>
				<ul class="colorList">
					<li v-for="item in colorList" :key="item.id">
						<img :src="item.imgpath"  class="imgColor"/>
						<span class="name">{{item.name}}</span>
					</li>
				</ul>
				<span class="number">数量</span>
				<div class="countBox">
					<input type="button" value="-" class="reduce"/>
					<span class="count">1</span>
					<input type="button" value="+" class="add"/>
				</div>
				<input type="button" class="determineBtn" value="确定"/>
			</div>
		</div>
	</div>
	
</template>

<script>
	import swiper from '../../view/swiper/index.vue'
	export default {
		name: "detail",
		data() {
			return {
				show: false,
				shouye: 'shouye',
				current: '1',
				// windowHeight: document.documentElement.clientHeight,
				lisData: [{
						id: '1',
						text: '图片1',
						imgpath: require('../../assets/img/mirror-swiper.png')
					},
					{
						id: '2',
						text: '图片2',
						imgpath: require('../../assets/img/mirror-swiper.png')
					},
					{
						id: '3',
						text: '图片3',
						imgpath: require('../../assets/img/mirror-swiper.png')
					},
					{
						id: '4',
						text: '图片4',
						imgpath: require('../../assets/img/mirror-swiper.png')
					},
				],
				goodsList: [{
						id: '1',
						text: '图片1',
						imgpath: require('../../assets/img/details-list.png')
					},
					{
						id: '2',
						text: '图片2',
						imgpath: require('../../assets/img/details-list.png')
					},
					{
						id: '3',
						text: '图片3',
						imgpath: require('../../assets/img/details-list.png')
					},
				],
				evaluateList: [{
						id: '1',
						name: '万***旅',
						headImg: require('../../assets/img/touxiang-detais.png'),
						evaluateText: '物流快，包装精美大气',
						evaluateImg: require('../../assets/img/evaluate__image.png')
					},
					{
						id: '2',
						name: '万***旅',
						headImg: require('../../assets/img/touxiang-detais.png'),
						evaluateText: '物流快，包装精美大气',
						evaluateImg: require('../../assets/img/evaluate__image.png')
					},
					{
						id: '3',
						name: '万***旅',
						headImg: require('../../assets/img/touxiang-detais.png'),
						evaluateText: '物流快，包装精美大气',
						evaluateImg: require('../../assets/img/evaluate__image.png')
					},
				],
				colorList:[
					{
						id:'1',
						imgpath: require('../../assets/img/details-list.png'),
						name:'01 自然色'
					},
					{
						id:'2',
						imgpath: require('../../assets/img/details-list.png'),
						name:'01 自然色'
					},
					{
						id:'3',
						imgpath: require('../../assets/img/details-list.png'),
						name:'01 自然色'
					}
				]
			}
		},
		components: {
			swiper: swiper,
		},
		methods: {
			choose(item) {
				this.current = item.id
			},
			tojump(shouye) {
				this.$router.push({
					path: `/${shouye}`,
				})
			},
			cart(){
				this.show=true
			},
			close(){
				this.show=false
			}
		}

	}
</script>

<style scoped="scoped" lang="less">
	.bg-Icon {
		width: 0.32rem;
		height: 0.32rem;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		position: absolute;
		top: 0.53rem;
		opacity: 0.5;
	}

	.bg {
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}

	#detail /deep/ .swiperBox {
		display: flex;
	}

	#detail /deep/ .swiperImg {
		display: block;
		width: 100%;
		height: 3.75rem;
	}

	#detail .head {
		position: relative;
	}

	.headL {
		background-image: url(../../assets/img/left-icon-white.png);
		.bg-Icon();
		left: 0.16rem;

	}

	.headR {
		background-image: url(../../assets/img/nav%20bar_icon_share.png);
		.bg-Icon();
		right: 0.16rem;

	}

	.footerL {
		position: absolute;
		width: 0.66rem;
		height: 0.14rem;
		background: #333333;
		text-align: center;
		line-height: 0.14rem;
		opacity: 0.3;
		border-radius: 0.05rem;
		font-size: 0.1rem;
		color: white;
		left: 0.20rem;
		bottom: 0.12rem;
	}

	.footerR {
		position: absolute;
		width: 0.39rem;
		height: 0.14rem;
		background: #333333;
		text-align: center;
		line-height: 0.14rem;
		opacity: 0.3;
		border-radius: 0.05rem;
		font-size: 0.1rem;
		color: white;
		right: 0.20rem;
		bottom: 0.12rem;
	}

	#detail {
		background: #F5F5F5;
		padding-bottom: 0.48rem;

		.activityBox {
			background: #FFFFFF;
			height: 0.44rem;
			line-height: 0.44rem;
			display: flex;
			background-color: rgb(204, 36, 65);

			.text1 {
				display: inline-block;
				width: 0.24rem;
				height: 0.32rem;
				font-size: 0.12rem;
				color: #FFFCFC;
				opacity: 1;
				margin: 0 0.2rem;
			}

			.price {
				font-size: 0.2rem;
				font-weight: bold;
				color: #FFFCFC;
				opacity: 1;
			}

			.text2 {
				font-size: 0.12rem;
				color: #FFFCFC;
				opacity: 1;
				margin-left: 1.37rem;
			}
		}

		.goods {
			background: #FFFFFF;
			display: flex;
			flex-direction: column;

			.price {
				font-size: 0.18rem;
				font-weight: bold;
				color: #C30D23;
				opacity: 1;
				margin: 0.08rem 0 0 0.2rem;
			}

			.introduce {
				display: inline-block;
				width: 3.35rem;
				font-size: 0.16rem;
				font-weight: bold;
				color: #333333;
				opacity: 1;
				margin: 0.1rem 0 0 0.2rem;
			}

			.describe {
				font-size: 0.14rem;
				color: #666666;
				opacity: 1;
				margin: 0.08rem 0 0 0.2rem;
			}
		}

		.discountBox {
			background: #FFFFFF;
			display: flex;
			flex-direction: column;
			margin-top: 0.08rem;
			padding-bottom: 0.2rem;

			.discount {
				display: flex;

				.youhui {
					font-size: 0.14rem;
					color: #333333;
					opacity: 1;
					margin: 0.2rem 0 0 0.2rem;
				}

				.newMen {
					padding: 0 0.04rem;
					height: 0.16rem;
					background: rgb(252, 232, 233);
					font-size: 0.1rem;
					color: #FE1D03;
					text-align: center;
					line-height: 0.16rem;
					margin: 0.23rem 0 0 0.12rem;
				}

				.present {
					font-size: 0.12rem;
					color: #333333;
					opacity: 1;
					margin: 0.22rem 0 0 0.12rem;

				}

				.rightImg {
					width: 0.2rem;
					height: 0.2rem;
					display: inline-block;
					background-image: url(../../assets/img/right-icon.png);
					.bg();
					margin: 0.20rem 0 0 0.91rem;
				}
			}

			.quan {
				display: flex;

				.coupons {
					background: rgb(252, 232, 233);
					font-size: 0.1rem;
					color: #FE1D03;
					opacity: 1;
					padding: 0 0.04rem;
					margin: 0.12rem 0 0 0.60rem;
				}

				.coupons2 {
					width: 0.66rem;
					height: 0.15rem;
					line-height: 0.15rem;
					text-align: center;
					display: inline-block;
					background-image: url(../../assets/img/coupons2.png);
					.bg();
					font-size: 0.1rem;
					color: #FE1D03;
					margin: 0.13rem 0 0 0.08rem;
				}

				.coupons3 {
					width: 0.66rem;
					height: 0.15rem;
					line-height: 0.15rem;
					text-align: center;
					display: inline-block;
					background-image: url(../../assets/img/coupons3.png);
					.bg();
					font-size: 0.1rem;
					color: #FE1D03;
					margin: 0.13rem 0 0 0.08rem;
				}
			}
		}

		.chooseBox {
			margin-top: 0.08rem;
			background: #FFFFFF;
			display: flex;
			flex-direction: column;
			padding-top: 0.08rem;

			.title {
				display: flex;
				// margin-top: 0.2rem;
				margin: 0.12rem 0 0 0.2rem;
				position: relative;

				.text1 {
					font-size: 0.14rem;
					font-weight: 800;
					color: #333333;
				}

				.text2 {
					font-size: 0.12rem;
					color: #333333;
					opacity: 1;
					// margin-top: 0.02rem;
					margin: 0.02rem 0 0 0.19rem;
				}

				.rightImg {
					width: 0.2rem;
					height: 0.2rem;
					display: inline-block;
					background-image: url(../../assets/img/right-icon.png);
					.bg();
					position: absolute;
					right: 0.15rem;
				}
			}

			.goodsList {
				display: flex;
				margin: 0.14rem 0 0 0.67rem;
				padding-bottom: 0.2rem;

				ul {
					display: flex;

					.present {
						border: 0.01rem solid red;
					}

					li {
						width: 0.44rem;
						height: 0.44rem;
						border: 0.01rem solid white;

						img {
							display: block;
							width: 100%;
							height: 100%;
						}
					}
				}

				.color {
					display: inline-block;
					width: 0.3rem;
					height: 0.32rem;
					background: #F7F7F7;
					;
					font-size: 0.1rem;
					color: #999999;
					padding: 0.08rem 0.09rem;
					transform: scale(0.9);
				}
			}

			.hrImg {
				width: 2.88rem;
				height: 0.01rem;
				background-image: url(../../assets/img/hrImg.png);
				.bg();
				margin-left: 0.67rem;
			}

			.notice {
				margin: 0.09rem 0 0.12rem 0.67rem;
				font-size: 0.12rem;
				color: #333333;
				opacity: 1;

				span {
					color: #C91328;
				}
			}

			.chooseFooter {
				margin: 0.25rem 0 0 0.22rem;
				padding-bottom: 0.18rem;

				ul {
					display: flex;

					li {
						display: flex;
						margin-right: 0.2rem;

						.text {
							font-size: 0.12rem;
							color: #333333;
							opacity: 1;
							margin-top: 0.02rem;
						}

						.bg-footer {
							width: 0.2rem;
							height: 0.2rem;
							background-image: url(../../assets/img/true-icon.png);
							display: inline-block;
							.bg();
						}
					}
				}
			}
		}

		.evaluateBox {
			margin-top: 0.08rem;
			background: #FFFFFF;
			display: flex;
			flex-direction: column;

			.head {
				display: flex;
				margin: 0.2rem 0 0 0.19rem;

				.line {
					width: 0.06rem;
					height: 0.18rem;
					display: inline-block;
					background-image: url(../../assets/img/line-shu.png);
					.bg();
				}

				.text {
					font-size: 0.14rem;
					font-weight: 800;
					opacity: 1;

					.red {
						color: #C30D23;
					}

					margin: -0.01rem 0 0 0.06rem;
				}

				.rightImg {
					width: 0.2rem;
					height: 0.2rem;
					display: inline-block;
					background-image: url(../../assets/img/right-icon.png);
					.bg();
					margin: -0.01rem 0 0 1.37rem;
				}
			}

			.keyWords {
				margin: 0.14rem 0 0 0.2rem;

				ul {
					display: flex;

					li {
						width: 0.48rem;
						height: 0.18rem;
						background: rgb(250, 231, 233);
						border-radius: 4px;
						font-size: 0.1rem;
						color: #333333;
						opacity: 1;
						text-align: center;
						line-height: 0.18rem;
						margin-right: 0.08rem;
					}
				}
			}

			.menEvaluate {
				margin: 0.16rem 0 0 0.2rem;

				.evaluateList {
					li {
						margin-top: 0.12rem;

						.head-men {
							position: relative;
							display: flex;

							.headImg {
								display: block;
								width: 0.28rem;
								height: 0.28rem;
							}

							.name {
								font-size: 0.12rem;
								font-weight: bold;
								color: #333333;
								opacity: 1;
								margin-left: 0.08rem;
							}

							.star {
								display: flex;
								position: absolute;
								bottom: 0;
								left: 0.34rem;

								li {
									width: 0.12rem;
									height: 0.12rem;
									display: inline-block;
									background-image: url(../../assets/img/star-icon.png);
									.bg();
								}
							}
						}

						.evaluate {
							margin-top: 0.12rem;
							display: flex;
							flex-direction: column;

							.evaluateText {
								font-size: 0.12rem;
								color: #333333;
								opacity: 1;
							}

							img {
								margin-top: 0.12rem;
								display: block;
								width: 0.88rem;
								height: 0.88rem;
							}
						}
					}
				}

			}
		}

		.footerBox {
			width: 3.75rem;
			position: fixed;
			bottom: 0;

			.footer {
				background-color: #FFFFFF;
				display: flex;
				justify-content: space-between;
				ul {
					display: flex;

					li:nth-child(1) {
						margin-left: 0.17rem;
					}

					li {
						display: flex;
						flex-direction: column;
						text-align: center;
						margin-left: 0.28rem;
						margin-top: 0.06rem;

						.collection {
							width: 0.2rem;
							height: 0.2rem;
							display: inline-block;
							background-image: url(../../assets/img/shouchang.png);
							.bg();
							margin: 0 auto;
						}

						.cart {
							width: 0.2rem;
							height: 0.2rem;
							display: inline-block;
							background-image: url(../../assets/img/cart.png);
							.bg();
							margin: 0 auto;
						}

						.kefu {
							width: 0.2rem;
							height: 0.2rem;
							display: inline-block;
							background-image: url(../../assets/img/service.png);
							.bg();
							margin: 0 auto;
						}

						.text {
							display: inline-block;
							font-size: 0.1rem;
							color: #333333;
							opacity: 1;

						}
					}
				}

				.btnBox{
					display: flex;
				}
				.add {
					width: 1.02rem;
					height: 0.48rem;
					background: #FACB58;
					font-size: 0.14rem;
					color: #FFFCFC;
					text-align: center;
					line-height: 0.48rem;
					border: none;
				}

				.buy {
					width: 1.02rem;
					height: 0.48rem;
					background: #C30D23;
					font-size: 0.14rem;
					color: #FFFCFC;
					text-align: center;
					line-height: 0.48rem;
					border: none;
				}
			}
		}
		
		.bulletBox{
			z-index: 50;
			position: fixed;
			bottom: 0;
			width: 3.75rem;
			height: 100%;
			.top{
				width: 3.75rem;
				height: 33.4%;
				background: #333333;
				opacity: 0.5;
			}
			.content{
				opacity: 1 !important;
				width: 3.75rem;
				height: 5rem;
				background: #FFFFFF;
				position: relative;
				.shopImg{
					width: 0.98rem;
					height: 0.98rem;
					position: absolute;
					top: 0.12rem;
					left: 0.2rem;
				}
				.price{
					font-size: 0.16rem;
					color: #C30D23;
					opacity: 1;
					position: absolute;
					top: 0.56rem;
					left: 1.3rem;
				}
				.choose{
					font-size: 0.14rem;
					color: #333333;
					opacity: 1;
					position: absolute;
					top: 0.91rem;
					left: 1.3rem;
				}
				.close{
					display: inline-block;
					width: 0.32rem;
					height: 0.32rem;
					background-image: url(../../assets/img/close.png);
					background-position: center;
					background-repeat: no-repeat;
					background-size: cover;
					position: absolute;
					top: 0.12rem;
					right: 0.2rem;
				}
				.colorNumber{
					font-size: 0.14rem;
					color: #333333;
					opacity: 1;
					position: absolute;
					top: 1.38rem;
					left: 0.2rem;
				}
				.colorList{
					display: flex;
					flex-wrap: wrap;
					width: 3rem;
					position: absolute;
					top: 1.59rem;
					left: 0.2rem;
					li{
						display: flex;
						margin-top: 0.16rem;
						margin-right: 0.16rem;
						width: 1.01rem;
						height: 0.29rem;
						background: #F7F7F7;
						border: 0.01rem solid #C30D23;
						.imgColor{
							width: 0.21rem;
							height: 0.21rem;
							margin: 0.04rem 0 0 0.08rem;
						}
						.name{
							font-size: 0.1rem;
							color: #333333;
							opacity: 1;
							margin: 0.08rem 0 0 0.08rem;
						}
					}
				}
				
				.number{
					font-size: 0.14rem;
					color: #333333;
					opacity: 1;
					position: absolute;
					top: 2.79rem;
					left: 0.2rem;
				}
				.countBox{
					display: flex;
					position: absolute;
					top: 3.16rem;
					left: 0.2rem;
					.reduce{
						width: 0.3rem;
						height: 0.3rem;
						background: #F7F7F7;
						border: none;
						font-size: 0.16rem;
					}
					.add{
						width: 0.3rem;
						height: 0.3rem;
						background: #F7F7F7;
						border: none;
						font-size: 0.16rem;
					}
					.count{
						display: inline-block;
						width: 0.58rem;
						height: 0.33rem;
						background: #F7F7F7;
						font-size: 0.16rem;
						text-align: center;
						line-height: 0.33rem;
						margin: 0 0.06rem;
					}
					
				}
				
				.determineBtn{
					width: 3.75rem;
					height: 0.48rem;
					background: #C30D23;
					font-size: 0.16rem;
					color: #FFFCFC;
					position: absolute;
					bottom: 0;
					border: none;
				}
			}
		}
	}
</style>
